<script setup>
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';

// 过滤选项
const dateRange = ref('lastMonth');
const department = ref('all');

// 部门选项
const departmentOptions = [
  { value: 'all', label: '全部科室' },
  { value: 'internal', label: '内科' },
  { value: 'surgery', label: '外科' },
  { value: 'gynecology', label: '妇产科' },
  { value: 'pediatrics', label: '儿科' },
  { value: 'ophthalmology', label: '眼科' },
  { value: 'dental', label: '口腔科' }
];

// 日期范围选项
const dateRangeOptions = [
  { value: 'lastWeek', label: '上周' },
  { value: 'lastMonth', label: '上月' },
  { value: 'lastQuarter', label: '上季度' },
  { value: 'lastYear', label: '去年' },
  { value: 'custom', label: '自定义' }
];

// 自定义日期范围
const customDateRange = ref([]);
const showCustomDateRange = computed(() => dateRange.value === 'custom');

// 关键指标数据
const keyMetrics = ref([
  {
    title: '门诊人次',
    value: 12568,
    change: '+5.2%',
    isPositive: true,
    icon: 'UserFilled',
    color: '#3498db'
  },
  {
    title: '住院人次',
    value: 1835,
    change: '+3.1%',
    isPositive: true,
    icon: 'House',
    color: '#9b59b6'
  },
  {
    title: '手术台数',
    value: 587,
    change: '+2.5%',
    isPositive: true,
    icon: 'Scissor',
    color: '#e74c3c'
  },
  {
    title: '平均住院日',
    value: '8.3天',
    change: '-0.5天',
    isPositive: true,
    icon: 'Calendar',
    color: '#27ae60'
  },
  {
    title: '床位使用率',
    value: '85.2%',
    change: '+2.3%',
    isPositive: true,
    icon: 'Bed',
    color: '#f39c12'
  },
  {
    title: '医疗收入',
    value: '¥5,682,450',
    change: '+6.8%',
    isPositive: true,
    icon: 'Money',
    color: '#16a085'
  }
]);

// 科室就诊分布数据
const departmentDistributionData = ref([
  { value: 3562, name: '内科' },
  { value: 2518, name: '外科' },
  { value: 1485, name: '妇产科' },
  { value: 1829, name: '儿科' },
  { value: 876, name: '眼科' },
  { value: 1238, name: '口腔科' },
  { value: 1060, name: '其他科室' }
]);

// 疾病分类数据
const diseaseCategoryData = ref([
  { value: 3260, name: '心血管疾病' },
  { value: 2125, name: '呼吸系统疾病' },
  { value: 1854, name: '消化系统疾病' },
  { value: 1452, name: '内分泌疾病' },
  { value: 1325, name: '骨科疾病' },
  { value: 1105, name: '神经系统疾病' },
  { value: 902, name: '泌尿系统疾病' },
  { value: 545, name: '其他疾病' }
]);

// 月度趋势数据
const monthlyTrendData = {
  months: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
  outpatient: [1025, 1132, 1243, 1354, 1465, 1576, 1635, 1720, 1810, 1905, 2015, 2156],
  inpatient: [125, 142, 155, 163, 178, 185, 190, 196, 201, 215, 223, 232],
  operations: [42, 48, 51, 55, 59, 62, 63, 65, 67, 70, 72, 75]
};

// 图表实例
let departmentChart = null;
let diseaseChart = null;
let trendChart = null;

// 初始化图表
onMounted(() => {
  initDepartmentChart();
  initDiseaseChart();
  initTrendChart();
  
  // 处理窗口大小变化
  window.addEventListener('resize', handleResize);
});

// 处理窗口大小变化
const handleResize = () => {
  departmentChart && departmentChart.resize();
  diseaseChart && diseaseChart.resize();
  trendChart && trendChart.resize();
};

// 初始化科室分布图表
const initDepartmentChart = () => {
  const chartDom = document.getElementById('department-distribution-chart');
  departmentChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      formatter: '{name}'
    },
    series: [
      {
        name: '科室就诊分布',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: departmentDistributionData.value
      }
    ]
  };
  
  departmentChart.setOption(option);
};

// 初始化疾病分类图表
const initDiseaseChart = () => {
  const chartDom = document.getElementById('disease-category-chart');
  diseaseChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      formatter: '{name}'
    },
    series: [
      {
        name: '疾病分类',
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '14',
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: diseaseCategoryData.value
      }
    ]
  };
  
  diseaseChart.setOption(option);
};

// 初始化月度趋势图表
const initTrendChart = () => {
  const chartDom = document.getElementById('monthly-trend-chart');
  trendChart = echarts.init(chartDom);
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['门诊人次', '住院人次', '手术台数'],
      bottom: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '10%',
      top: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: monthlyTrendData.months
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '门诊人次',
        type: 'line',
        data: monthlyTrendData.outpatient,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#3498db'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(52, 152, 219, 0.4)' },
            { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
          ])
        }
      },
      {
        name: '住院人次',
        type: 'line',
        data: monthlyTrendData.inpatient,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#9b59b6'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(155, 89, 182, 0.4)' },
            { offset: 1, color: 'rgba(155, 89, 182, 0.1)' }
          ])
        }
      },
      {
        name: '手术台数',
        type: 'line',
        data: monthlyTrendData.operations,
        smooth: true,
        lineStyle: {
          width: 3,
          color: '#e74c3c'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(231, 76, 60, 0.4)' },
            { offset: 1, color: 'rgba(231, 76, 60, 0.1)' }
          ])
        }
      }
    ]
  };
  
  trendChart.setOption(option);
};

// 数据筛选处理
const handleFilter = () => {
  // 这里应该包含实际的数据过滤逻辑
  // 实际应用中应该发送请求获取数据
  console.log('筛选参数: ', {
    dateRange: dateRange.value,
    department: department.value,
    customDateRange: customDateRange.value
  });
  
  // 重新加载图表数据
  initDepartmentChart();
  initDiseaseChart();
  initTrendChart();
};

// 导出报表数据
const exportReport = () => {
  console.log('导出报表');
  // 实际应用中应该调用导出接口
};
</script>

<template>
  <div>
    <div class="report-header">
      <h2 class="report-title">医疗数据报表</h2>
      
      <!-- 筛选器 -->
      <div class="filter-section">
        <el-form :inline="true">
          <el-form-item label="统计周期">
            <el-select v-model="dateRange" placeholder="选择统计周期" @change="handleFilter">
              <el-option
                v-for="item in dateRangeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item v-if="showCustomDateRange" label="自定义日期">
            <el-date-picker
              v-model="customDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="handleFilter"
            />
          </el-form-item>
          
          <el-form-item label="科室">
            <el-select v-model="department" placeholder="选择科室" @change="handleFilter">
              <el-option
                v-for="item in departmentOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="exportReport">
              <el-icon><Download /></el-icon>
              导出报表
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    
    <!-- 关键指标卡片 -->
    <div class="metrics-grid">
      <div 
        v-for="(metric, index) in keyMetrics" 
        :key="index" 
        class="metric-card"
      >
        <div class="metric-icon" :style="{ backgroundColor: metric.color + '20', color: metric.color }">
          <el-icon>
            <component :is="metric.icon"></component>
          </el-icon>
        </div>
        <div class="metric-content">
          <div class="metric-title">{{ metric.title }}</div>
          <div class="metric-value">{{ metric.value }}</div>
          <div :class="['metric-change', metric.isPositive ? 'positive' : 'negative']">
            <el-icon v-if="metric.isPositive"><ArrowUp /></el-icon>
            <el-icon v-else><ArrowDown /></el-icon>
            {{ metric.change }}
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-section">
      <el-row :gutter="20">
        <!-- 科室就诊分布 -->
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <h3 class="chart-title">科室就诊分布</h3>
            </div>
            <div class="chart-container">
              <div id="department-distribution-chart" class="chart"></div>
            </div>
          </div>
        </el-col>
        
        <!-- 疾病分类 -->
        <el-col :span="12">
          <div class="chart-card">
            <div class="chart-header">
              <h3 class="chart-title">疾病分类统计</h3>
            </div>
            <div class="chart-container">
              <div id="disease-category-chart" class="chart"></div>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <!-- 月度趋势 -->
      <div class="chart-card">
        <div class="chart-header">
          <h3 class="chart-title">月度趋势分析</h3>
        </div>
        <div class="chart-container">
          <div id="monthly-trend-chart" class="chart trend-chart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.report-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.report-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.filter-section {
  margin-left: auto;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.metric-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  transition: transform 0.3s;
}

.metric-card:hover {
  transform: translateY(-5px);
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.metric-icon .el-icon {
  font-size: 24px;
}

.metric-content {
  flex: 1;
}

.metric-title {
  color: var(--text-secondary);
  font-size: 14px;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 4px;
}

.metric-change {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.metric-change.positive {
  color: #27ae60;
}

.metric-change.negative {
  color: #e74c3c;
}

.charts-section {
  margin-bottom: 24px;
}

.chart-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
}

.chart-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
}

.chart-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.chart-container {
  padding: 20px;
}

.chart {
  height: 320px;
  width: 100%;
}

.trend-chart {
  height: 400px;
}

@media (max-width: 768px) {
  .metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .metrics-grid {
    grid-template-columns: 1fr;
  }
  
  .report-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-section {
    margin-left: 0;
    margin-top: 16px;
  }
}
</style> 